window.addEventListener('load', function () {
    var small_img = document.querySelector('.small_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big')
    var big_img = document.querySelector('.big_img');
    small_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    small_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    small_img.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.offsetLeft;  // 计算鼠标在盒子内的距离
        var y = e.pageY - this.offsetTop;
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // 宽高是一样的，所以可以简写
        // var maskMaxX = small_img.offsetWidth - mask.offsetWidth;
        // var maskMaxY = small_img.offsetHeight - mask.offsetHeight;
        var maskMax = small_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';  // 让鼠标处于mask中心位置
        mask.style.top = maskY + 'px';
        // 大图片移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层最大移动距离
        // var bigMax = big_img.offsetWidth - big.offsetWidth;  左上为负值
        var bigMax = big.offsetWidth - big_img.offsetWidth; // 大图片的最大移动距离
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        big_img.style.left = bigX + 'px';
        big_img.style.top = bigY + 'px';
    })
})
